<template>
  <div class="publish">
    <van-nav-bar title="发布" />

    <div class="container">
      <van-form>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          style="margin-top: 10px"
          v-model="title"
          name="title"
          placeholder="请输入标题"
        />

        <van-field
          readonly
          clickable
          name="type"
          :value="cate_name"
          placeholder="请选择"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom"
          ><van-picker
            show-toolbar
            value-key="name"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        /></van-popup>

        <van-field
          style="margin-top: 10px"
          name="content"
          v-model="content"
          rows="5"
          autosize
          type="textarea"
          placeholder="请输入内容"
          show-word-limit
        />
        <van-field name="uploader" style="margin-top: 10px">
          <template #input>
            <van-uploader v-model="fileList" multiple :max-count="3" />
          </template>
        </van-field>

        <div style="margin: 30px 50px">
          <van-button
            round
            block
            type="primary"
            size="normal"
            @click="publish"
            :square="true"
            native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Uploader, Popup, picker } from "vant";
import { addArticle, } from "@/api/api";
import { getCateList, } from "@/api/home.js";
import { mapState,mapActions } from "vuex";

export default {
  data() {
    return {
      title: "",
      content: "",
      fileList: [],
      ctae_id: "",
      cate_name: "",
      columns: [],
      showPicker: false,
    };
  },
  created() {
    this.getCate();
  },
  computed: {
    ...mapState(["uid", "userInfo"]),
  },
  components: {
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [picker.name]: picker,
  },
  methods: {

    ...mapActions(['upload']),
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
  
 async   publish(e) {
  if (!this.checkLogin()) return
      let { title, content, fileList, uid, userInfo, cate_name, cate_id } =
        this;
      console.log(title, content, fileList, uid, userInfo, cate_name, cate_id);
      // console.log(fileList[0].fole);
      let imageSrc = await this.upload(fileList);
      console.log(imageSrc);

      // 获取到一个上传到七牛云时认证的token

      addArticle({
        title,
        content,
        cate_name,
        cate_id,
        author_id: uid,
        imageSrc: [],
        author: userInfo.nickname,
      }).then((res) => {
        console.log(res);
        if (res.code==0) {
          this.$toast('发布成功')
        }else{
          this.$toast(res.msg)
        }
      });
    },
    getCate() {
      getCateList().then((res) => {
        this.columns = res.data;
      });
    },
    onConfirm({ name, _id }) {
      this.cate_name = name;
      this.cate_id = _id;
      this.showPicker = false;
    },
  },
};
</script>
<style lang="less">
h1 {
  color: @baseColor;
}
::v-deep .van-button--primary{
  border: none;
}
</style>
